<template>
  <div>
    <a v-if="regExpList.length == 0" @click="plusAdd()" href="javascript:void(0);">添加</a>

    <a-tooltip placement="bottomLeft">
      <template slot="title">
        <span>1. 固定电话：^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$</span><br />
        <span>2. 手机号码：^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$</span><br />
        <span>3. 手机号码或固定电话：^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$</span><br />
        <span>4. 电子邮箱：^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$</span><br />
        <span>5. 邮政编码：^[0-9]{6}$</span><br />
        <span>6. 传真：^(?:\d{3,4}-)?\d{7,8}(?:-\d{1,6})?$</span><br />
      </template>
      <a-button v-if="regExpList.length > 0" type="link" icon="question-circle">常用默认值</a-button>
    </a-tooltip>

    <a-row v-for="(item, index) in regExpList" :key="index" :gutter="16">
      <a-col :span="1">
        <a href="javascript:void(0);">{{ index + 1 }}</a>
      </a-col>
      <a-col :span="10">
        <a-input allow-clear v-model="item.regexp" placeholder="请输入正则表达式" />
      </a-col>
      <a-col :span="10">
        <a-input allow-clear v-model="item.message" placeholder="请输入校验提示" />
      </a-col>
      <!-- 操作按钮 -->
      <a-col :span="3">
        <a-popconfirm
          class="plusBox"
          title="确定删除吗？"
          ok-text="是"
          cancel-text="否"
          @confirm="plusDel(item, index)"
        >
          <a-icon slot="icon" type="delete" />
          <a-icon type="minus" />
        </a-popconfirm>
        <span v-if="index + 1 == regExpList.length" class="plusBox" @click.stop="plusAdd()">
          <a-icon type="plus" />
        </span>
      </a-col>
    </a-row>
    
  </div>
</template>
<script>
export default {
  props: {
    valuelist: {
      type: Array
    }
  },
  data() {
    return {
      regExpList: this.valuelist || []
    }
  },
  created() {},
  methods: {
    plusAdd() {
      this.regExpList.push({
        regexp: undefined,
        message: undefined
      })
    },
    plusDel(item, index) {
      this.regExpList.splice(index, 1)
    },
    f_checkRules() {
      let check = {status: false, value: this.regExpList}
      if(this.regExpList.length > 0) {
        let i = 0
        for(let v of this.regExpList) {
          if(!v.regexp) {
            this.$message.warning(`请输入${i + 1}号的正则表达式`)
            return check
          }
          if(!v.message) {
            this.$message.warning(`请输入${i + 1}号的校验提示`)
            return check
          }
          i++
        }
      }
      check.status = true
      return check
    }
  }
}
</script>

<style lang="less" scoped>
.plusBox {
  margin: 0 10px 0 0;
  cursor: pointer;
  color: #1e90ff;
}

</style>
